<template>
    <ul id="footNav">
        <li @click="Home()">
            <span class="iconfont icon-shouye"></span>
            首页
        </li>
        <li @click="Member()">
            <span class="iconfont icon-huiyuan"></span>
            会员
        </li>
        <li v-on:click="seach()">
            <span class="iconfont icon-faxian"></span>
            发现
        </li>
        <li @click="News()">
            <span class="iconfont icon-icon"></span>
            消息
        </li>
        <li @click="My()">
            <span class="iconfont icon-wode"></span>
            我的
        </li>
    </ul>
</template>

<script>
    export default {
        name: "bottom",
        methods:{
            seach(){
                this.$router.push("/seach");
            },
            Home(){
                this.$router.push("/home");
            },
            Member(){
                this.$router.push("/member");
            },
            News(){
                this.$router.push("/news");
            },
            My(){
                this.$router.push("/my");
            }
        }
    }
</script>

<style scoped>
    #footNav{
        width: 100%;
        height: 0.5rem;
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        background-color: #fff;
        border-top: 0.02rem solid #f7f7f7;
        z-index: 100;
    }
    li{
        height: 100%;
        font-size: 0.12rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #060606;
    }
    span{
        font-size: 0.22rem;
        color: #050505;
    }
</style>